<template>
  <div>
    <div class="c-textAlign-c" :class="(mpQrcode && !isSubscribe) ? 'c-pt120':'c-pt260'">
      <div class="c-fc-xlred c-fs28">请等待后台审核</div>
      <div class="c-fc-xblack c-fs24 c-mt20 c-lh36">后台审核通过后即报名成功<br />可直接进入详情页面去上课</div>
    </div>
    <div v-if="mpQrcode && !isSubscribe">
      <div class="qrcode c-ww240 c-hh240 c-center c-mt90 c-p c-text-hidden">
        <img class="c-w100 c-h" :src="$addXossFilter(mpQrcode)" />
        <span class="arr arr-tl"></span>
        <span class="arr arr-tr"></span>
        <span class="arr arr-bl"></span>
        <span class="arr arr-br"></span>
      </div>
      <div class="c-fc-sblack c-textAlign-c c-lh36 c-mt20 c-fs24">关注公众号<br />获取审核结果通知</div>
    </div>
    <div class="btn-back theme-bg-gradient" @click="clickGoDetail">返回</div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "JoinCheck",
  data() {
    return {
      mpQrcode: '',
      isSubscribe: ''
    }
  },
  created() {
    utilJs.appShare(this);
    this.classId = this.$route.query.classId || '';
    this.mpQrcode = this.$route.query.mpQrcode;
    this.isSubscribe = Number(this.$route.query.isSubscribe); //是否已经关注了公众号
  },
  methods:{
    clickGoDetail() {
      if (!this.classId) {
        return;
      }
      this.$routerGo(this, "replace", {
        path: `/homePage/privateClass/classDetail?classId=${this.classId}`
      })
    }
  }
}
</script>
<style scoped>
.arr {
  position: absolute;
  padding: 3px;
  border-style: solid;
  border-color: #333333;
}
.arr-tl {
  border-width: 3px 0 0 3px;
  top: -2px;
  left: -2px;
}
.arr-tr {
  border-width: 3px 3px 0 0;
  top: -2px;
  right: -2px;
}
.arr-bl {
  border-width: 0 0 3px 3px;
  bottom: -2px;
  left: -2px;
}
.arr-br {
  border-width: 0 3px 3px 0;
  bottom: -2px;
  right: -2px;
}
.btn-back{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5rem;
  z-index: 1;
  margin: 0 auto;
  width: 14.8rem;
  height: 1.5rem;
  border-radius: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  color: #fff;
}
</style>

